<template>
	<view>
		<view class="navbar" :style="{background:isstip?'#ffffff':''}">
			<zbar></zbar>
			<view class="navbarcontent">
				<uni-icons class="ricon" @click="goback" type="left" size="24"
					:color="isstip?'#000':'#fff'"></uni-icons>
				<view class="title" v-show="isstip">
					商家详情
				</view>
			</view>
		</view>
		<view class="shop_top">
			<image class="bcg" :src="shopInfo.backgroundImg" mode="aspectFill"></image>
			<view class="shop_abs">
				<view class="top_flex">
					<view class="top_flex_l">
						<view class="uname">{{shopInfo.shopName}}</view>
						<view class="uflex">
							<view class="block_l">
								<span class="t1">{{shopInfo.rating}}</span>
								<image src="/static/icon/x.png" mode=""></image>
								<span
									class="t2">({{shopInfo.replyCount>99?shopInfo.replyCount+'+':shopInfo.replyCount}})</span>
							</view>
							<view class="tip">
								{{shopInfo.category}}
							</view>
						</view>
					</view>
					<image class="rigimg" :src="shopInfo.logo" mode="aspectFill"></image>
				</view>

				<view class="address">
					<view class="" style="flex: 1;">
						<view class="">
							{{shopInfo.address}}
						</view>
						<view class="" style="color: #29A85C;">
							距离您{{shopInfo.distanceString}}
						</view>
					</view>
					<view class="right">
						<image src="/static/icon/dh.png" mode="" @click="$opennavigation(shopInfo)"></image>
						<image src="/static/icon/sj.png" mode="" @click="$phoneCall(shopInfo.shopPhone)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="shop_img">
			<image src="/static/shop1.png" mode=""></image>
			<view class="shop_abs">
				<view class="its">
					<image src="/static/shop2.png" mode=""></image>
					<view class="">
						入驻平台 <span>{{shopInfo.registerMonthLong}}</span> 个月
					</view>
				</view>
				<view class="its">
					<image src="/static/shop3.png" mode=""></image>
					<view class="">
						累计销量<span>{{shopInfo.orderCount}}</span>单
					</view>
				</view>
			</view>
		</view>
		<view class="shop_list">
			<view class="shop_t">
				<view @click="changeType(1)" :class="typechang == 1?'ats':'ts'">
					商品列表
				</view>
				<view @click="changeType(2)" :class="typechang == 2?'ats':'ts'">
					商家资质
				</view>
			</view>
			<view class="shop_flex" v-if="typechang==1">
				<view class="price_item" v-for="(item,index) in shopInfo.productList" :key="index"
					@click="pageDetail(item)">
					<view class="img">
						<image :src="item.img.split(',')[0]" mode="aspectFill"></image>
						<view class="" v-if="item.sellStop != 1 && item.status =='UP'">
							<view class="tip" v-if="item.count ==1">仅剩{{item.count}}份</view>
							<view class="tip" v-else>剩5份+</view>
							<view class="time">
								<image src="/static/icon/z.png" mode=""></image>
								今天{{item.takeTimeBegin.substring(0,5)}}-{{item.takeTimeEnd.substring(0,5)}}
							</view>
						</view>
						<view class="time1" v-if="item.sellStop == 1 || item.status !='UP'">
							<view class="tflex1" v-if="item.status !='UP'">
								<image src="/static/icon/x1.png" mode=""></image>
								<view class="">
									未上架
								</view>
							</view>
							<view class="tflex1" v-else-if="item.sellStop == 1">
								<image src="/static/icon/k.png" mode=""></image>
								<view class="">
									已售罄
								</view>
							</view>

							<view class="tflex">
								<image src="/static/icon/z.png" mode=""></image>
								今天{{item.takeTimeBegin.substring(0,5)}}-{{item.takeTimeEnd.substring(0,5)}}
							</view>
						</view>
					</view>
					<view class="text">{{item.productName}}</view>
					<view class="DINB">
						<span class="ic">￥</span>{{item.price}}<span
							class="FINE">￥{{item.priceOldBegin}}-{{item.priceOldEnd}}</span>
					</view>
					<view class="block_flex">
						<view class="block_l">
							<span class="t1">{{item.rating}}</span>
							<image src="/static/icon/x.png" mode=""></image>
							<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
						</view>
						<view class="block_r">
							<view @click.stop="test(item)" class="btn" :class="item.subscribe?'b1':'b2'" v-if="item.sellStop == 1 || item.status !='UP'
							">
								{{item.subscribe?'已订阅':'开售提醒'}}
							</view>
							<view class="btn" v-if="item.sellStop == 0 && item.status =='UP'">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zz" v-else>
				<view class="tt">商家承诺</view>
				<view class="text">
					商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺商家承诺。
				</view>
				<view class="images">
					<image @click="$previewImage(shopInfo.uimg,ind)" v-for="(img,ind) in shopInfo.uimg" :key="index"
						:src="img" mode=""></image>
				</view>
			</view>
		</view>
		<view class="shop_pingl" v-if="typechang==1 " id="headerPanel">
			<view class="top">
				<view class="" style="margin-top: 15rpx;">
					全部({{shopInfo.replyCount}})
				</view>
				<view class="textrig">
					<view class="">{{shopInfo.rating}}</view>
					<uni-rate class="x" readonly="true" :value="shopInfo.rating" size='16'
						activeColor="#000"></uni-rate>
				</view>
			</view>
			<view class="block_1" v-if="!nolist">
				<view class="tipflex">
					<view class="ites" v-for="(i,idx) in tagList" :key="idx">
						{{idx}} ({{i}})
					</view>
				</view>
				<view class="change">
					<view class="change_l">
						<view class="" @click="changeList(0)" :style="{color:params.order == ''?'':'#D1CDCD'}">
							推荐
						</view>
						<view class="x"></view>
						<view class="" @click="changeList(1)" :style="{color:params.order == 1?'':'#D1CDCD'}">
							最新
						</view>
					</view>
					<view class="change_r">
						<image src="/static/icon/zs.png" mode=""></image>
						为您展示真实评价
					</view>
				</view>
			</view>
			<view class="plist">
				<view class="items" v-for="(item,index) in commentList" :key="index" @click="pagePer(item)">
					<view class="items_user">
						<view class="user_flex">
							<image class="uimg" :src="item.userHead" mode="aspectFit"></image>
							<view class="uname">
								{{item.userName}}
							</view>
						</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="star">
						<uni-rate readonly="true" :value="item.rating" size='19' activeColor="#000"></uni-rate>
					</view>
					<view class="text">{{item.content}}</view>
					<view class="pimglist" v-if="item.img">
						<image @click.stop="$previewImage(item.img,ind)" v-for="(img,ind) in item.img" :key="ind"
							:src="img" mode="scaleToFill"></image>
					</view>
					<view class="shop">
						{{item.productName}}({{item.productCount}}份)
						<span>￥{{item.productPrice}}</span><span class="s2">￥{{item.productPriceOld}}</span>
					</view>
					<view class="imgflex">
						<view class="tipflexs">
							<view class="ites" v-for="(tag,ind) in item.tag" :key="ind">
								{{tag}}
							</view>
						</view>
						<view class="img_r">
							<view class="r">
								<span>{{item.replyCount}}</span>
								<uni-icons size="20" color='#D9D9D9' type="chat"></uni-icons>
							</view>
							<view class="r" @click.stop="handleDZ(item,index)">
								<span>{{item.likeCount}}</span>
								<uni-icons v-if="item.likeFlag" size="20" color='#000000'
									type="hand-up-filled"></uni-icons>
								<uni-icons v-else size="20" color='#D9D9D9' type="hand-up"></uni-icons>
							</view>
						</view>
					</view>
					<view class="dialog" v-if="item.replyList!=0">
						<view class="itemss" v-for="(reply,index) in item.replyList" :key="index">
							<view class="items_users">
								<view class="items_conts">
									<view class="user_flexs">
										<image class="uimg" :src="reply.sendUserHead" mode=""></image>
										<view class="uname">{{reply.sendUserName}}</view>
										<view class="tipss" v-if="reply.sendUserShop == 1">
											店铺
										</view>
										<view class="tipss1" v-if="reply.sendUserShop == 2">
											平台
										</view>
									</view>
									<view class="cont" v-if="reply.reply==1">
										<view class="hf">
											回复
										</view>
										<span>{{reply.receiveUserName}}</span>
									</view>
								</view>
								<view class="time">{{reply.createTime}}</view>
							</view>
							<view class="contxt">
								{{reply.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="kong" v-if="nolist">
				<image src="/static/kpj.png" mode=""></image>
				<view class="">
					尚无评价
				</view>
				<view class="" style="height: 100rpx;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopInfo,
		commentTag,
		commentList,
		commentLike,
		postSubscribe
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				shopInfo: {},
				isstip: false,
				typechang: 1,


				params: {
					shopId: '', //店铺ID
					productId: '', //商品ID
					tag: '', //标签
					img: '', //有图：1
					order: '', //最新：1
					pageNum: 1,
					pageSize: 10
				},
				tagList: [], //评价标签
				commentList: [], //评论列表
				nolist: false,
			};
		},
		onLoad(option) {
			this.params.shopId = option.id
			commentTag({
				shopId: option.id,
			}).then(res => {
				this.tagList = res.data
			})
			this.getcommentList()
			shopInfo({
				id: option.id,
				latitude: uni.getStorageSync('address').latitude,
				longitude: uni.getStorageSync('address').longitude
			}).then(res => {
				this.shopInfo = res.data
				this.shopInfo.uimg = res.data.otherImg.split(',')
				this.shopInfo.uimg.push(res.data.licenseImg)
			})
		},
		onReachBottom() {
			this.params.pageNum++
			this.getcommentList()
		},
		methods: {
			//测试订阅
			test(item) {
				console.log(item, '---');
				if (uni.getStorageSync('userToken')) {
					uni.requestSubscribeMessage({
						tmplIds: ['8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M'], // 这里填写你的模板ID数组
						success(res) {
							console.log(res);
							if (res['8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M'] === 'accept') {
								// 用户同意订阅该模板
								console.log('用户同意订阅TEMPLATE_ID_1');
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										let obj = {
											code: loginRes.code,
											templateId: '8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M',
											productId: item.id,
										}
										postSubscribe(obj).then(res => {
											if (res.code == 200) {
												item.subscribe = true
												uni.showToast({
													title: '商品已订阅',
													icon: 'none'
												})
											}
										})
									}
								});
							}
							if (res['TEMPLATE_ID_2'] === 'reject') {
								// 用户拒绝订阅该模板
								console.log('用户拒绝订阅TEMPLATE_ID_2');
							}
						},
						fail(err) {
							console.error('订阅消息失败', err);
						}
					});

				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
			},
			//评价列表
			getcommentList() {
				commentList(this.params).then(res => {
					res.rows.forEach(item => {
						item.img = item.img?.split(',')
						item.tag = item.tag?.split(',')
					})
					this.commentList.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					// if(this.commentList.length == res.total){
					// 	uni.showToast({
					// 		title:'已加载全部',
					// 		icon:'none'
					// 	})
					// }
				})
			},
			//跳转某一条评论
			pagePer(item) {
				console.log(item);
				uni.navigateTo({
					url: `/mainpage/perComment?id=${item.id}`
				})
			},
			//点赞
			handleDZ(item) {
				commentLike({
					id: item.id
				}).then(res => {
					item.likeFlag = !item.likeFlag
					if (item.likeFlag) {
						item.likeCount++
					} else {
						item.likeCount--
					}
				})
			},
			//推荐最新
			changeList(type) {
				this.params.pageNum = 1
				this.params.order = type
				commentList(this.params).then(res => {
					res.rows.forEach(item => {
						item.img = item.img?.split(',')
						item.tag = item.tag?.split(',')
					})
					this.commentList = res.rows
				})
			},
			//图片预览
			previewImage(list) {
				uni.previewImage({
					urls: list,
				});
			},
			//跳转详情
			pageDetail(item) {
				uni.navigateTo({
					url: `/mainpage/details?productid=${item.id}&&distance=${this.shopInfo.distanceString}`
				})
			},

			changeType(type) {
				this.typechang = type
			},
			goback() {
				uni.navigateBack()
			},
			// 页面滚动时触发的生命周期函数
			onPageScroll: function(e) {
				if (e.scrollTop > 170) {
					this.isstip = true
				} else {
					this.isstip = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.kong {
		margin: 100rpx auto;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;

		image {
			width: 228rpx;
			height: 228rpx;
		}
	}

	page {
		background: #FBFBFB;
	}

	.navbar {
		position: fixed;
		width: 100%;
		top: 0;
		padding: 0rpx 10px;
		box-sizing: border-box;
		z-index: 9;

		.navbarcontent {
			position: relative;
			height: 44px;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			.ricon {
				position: absolute;
			}

			.title {
				flex: 1;
				/* #ifdef APP-PLUS */
				font-size: 34rpx;
				/* #endif */
				/* #ifndef APP-PLUS */
				font-size: 17px;
				/* #endif */
				text-align: center;
			}

		}
	}

	.shop_top {
		width: 100%;
		height: 640rpx;
		position: relative;
		.bcg {
			width: 100%;
			height: 640rpx;
			border-radius: 0rpx 0rpx 40rpx 40rpx;
		}
		.shop_abs {
			position: absolute;
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			bottom: 20rpx;
			left: 20rpx;
			padding: 26rpx 22rpx;
			box-sizing: border-box;

			.top_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rigimg {
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}

				.top_flex_l {
					.uname {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 48rpx;
						color: #000000;
					}

					.uflex {
						display: flex;
						margin-top: 15rpx;

						.tip {
							height: 44rpx;
							background: #FFFFFF;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							text-align: center;
							line-height: 44rpx;
							padding: 0rpx 15rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #000000;
							margin-left: 20rpx;
							border: 1px solid #000000;
						}
					}

					.block_l {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin: 0rpx 6rpx;
						}

						.t1 {
							font-family: 'DINB';
							font-size: 32rpx;
							color: #000000;
						}

						.t2 {
							font-family: 'FINE';
							font-weight: 400;
							font-size: 24rpx;
							color: #979797;
						}
					}
				}
			}

			.address {
				background: #F3F3F3;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				padding: 15rpx 20rpx;
				box-sizing: border-box;
				margin: 20rpx auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					image {
						width: 32rpx;
						height: 33rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
	}

	.shop_img {
		margin-top: 20rpx;
		width: 100%;
		height: 320rpx;
		position: relative;

		image {
			width: 100%;
			height: 320rpx;
		}

		.shop_abs {
			position: absolute;
			width: 670rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			bottom: 24rpx;
			left: 40rpx;
			display: flex;
			text-align: center;
			justify-content: space-around;
			padding: 28rpx 42rpx;
			box-sizing: border-box;

			.its {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				span {
					font-family: 'DINB';
					font-size: 40rpx;
					color: #29A85C;
					margin: 0 6rpx;
				}
			}
		}
	}

	.shop_list {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 34rpx 0rpx 0rpx;

		.shop_t {
			display: flex;

			.ts {
				width: 50%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				padding-bottom: 20rpx;
				border-bottom: 2px solid #E6E6E6;
			}

			.ats {
				width: 50%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				padding-bottom: 20rpx;
				border-bottom: 2px solid #000000;
			}
		}

		.shop_flex {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 20rpx 0rpx;
			justify-content: space-between;
		}

		.price_item {
			width: 350rpx;
			margin-bottom: 20rpx;

			.img {
				width: 350rpx;
				height: 200rpx;
				position: relative;

				image {
					width: 350rpx;
					height: 200rpx;
					border-radius: 15rpx 15rpx 0rpx 0rpx;
				}

				.tip {
					position: absolute;
					top: 14rpx;
					left: 12rpx;
					height: 32rpx;
					background: #29A85C;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 0 10rpx;
					line-height: 32rpx;
				}

				.time {
					position: absolute;
					bottom: 0%;
					width: 100%;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					font-family: PingFang SC,
					PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}

				.time1 {
					position: absolute;
					top: 0%;
					width: 100%;
					height: 200rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 15rpx;
					display: flex;
					justify-content: center;

					.tflex {
						width: 100%;
						position: absolute;
						bottom: 6rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC,
							PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
					}

					.tflex1 {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;

						image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 6rpx;
						}
					}

				}
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 16rpx;
			}

			.block_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0rpx 6rpx;
				}

				.block_l {
					display: flex;
					align-items: center;

					.t1 {
						font-family: 'DINB';
						font-size: 32rpx;
						color: #000000;
					}

					.t2 {
						font-family: 'FINE';
						font-weight: 400;
						font-size: 24rpx;
						color: #979797;
					}

				}

				.block_r {
					.btn {
						width: 148rpx;
						height: 52rpx;
						background: #000000;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 52rpx;
						text-align: center;
					}

					.b1 {
						background: #CE7034;
					}

					.b2 {
						background: #29A85C;
					}
				}
			}

		}

		.zz {
			padding: 26rpx 20rpx;

			.tt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 10rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #7B7B7B;
				line-height: 38rpx;
				text-indent: 2rem;
			}

			.images {
				text-align: center;
				margin: 20rpx auto;

				image {
					width: 556rpx;
					height: 380rpx;
				}

			}
		}

	}

	.shop_pingl {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;

		.top {
			width: 750rpx;
			height: 120rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;

			.textrig {
				display: flex;
				font-family: 'DINB';
				font-size: 48rpx;

				.x {
					margin-top: 20rpx;
				}
			}
		}

		.block_1 {
			padding: 20rpx;
			box-sizing: border-box;

			.tipflex {
				display: flex;
				flex-wrap: wrap;

				.ites {
					height: 48rpx;
					background: #036029;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding: 0rpx 14rpx;
					text-align: center;
					line-height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0rpx 10rpx 20rpx 0rpx;
				}
			}

			.change {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 26rpx auto 0rpx;

				.change_l {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					display: flex;
					align-items: center;

					.x {
						margin: 0rpx 12rpx;
						width: 2rpx;
						height: 30rpx;
						background-color: #D1CDCD;
					}
				}

				.change_r {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #D1CDCD;
					display: flex;
					align-items: center;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.plist {
			font-family: PingFang SC, PingFang SC;
			padding: 0rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;

			.items {
				border-top: 1px solid #D1CDCD;
				margin-top: 30rpx;

				.items_user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.user_flex {
						display: flex;
						align-items: center;

						.uimg {
							width: 50rpx;
							height: 50rpx;
							border-radius: 25rpx;
						}

						.uname {
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							margin-left: 10rpx;
						}
					}

					.time {
						font-size: 24rpx;
						color: #979797;
					}
				}

				.star {
					margin: 14rpx auto;
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					word-break: break-all;
					margin-bottom: 20rpx;
				}

				.pimglist {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					image {
						width: 230rpx;
						height: 210rpx;
						border-radius: 10rpx;
					}
				}

				.shop {
					height: 68rpx;
					background: #F3F3F3;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					padding: 0rpx 20rpx;
					line-height: 68rpx;
					box-sizing: border-box;
					display: inline-block;

					span {
						font-family: 'DINB';
					}

					.s2 {
						color: #D1CDCD;
						font-size: 22rpx;
						text-decoration-line: line-through;
						margin-left: 6rpx;
					}
				}

				.imgflex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 30rpx auto;

					.tipflexs {
						flex: 1;
						display: flex;

						.ites {
							height: 48rpx;
							background: #036029;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							padding: 0rpx 14rpx;
							text-align: center;
							line-height: 48rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-right: 10rpx;
						}
					}

					.img_r {
						display: flex;
						align-items: center;

						.r {
							display: flex;
							margin-left: 20rpx;
							align-items: center;
						}

						span {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #D1CDCD;
						}
					}
				}

				.dialog {
					background: #FAF9F7;
					border-radius: 6rpx;
					padding: 22rpx 24rpx 1rpx 24rpx;

					.itemss {
						margin-bottom: 24rpx;

						.items_users {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.items_conts {
								display: flex;
								align-items: center;

								.cont {
									display: flex;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #000000;

									.hf {
										color: #CE7034;
										margin: 0 10rpx;
									}
								}
							}

							.user_flexs {
								display: flex;
								align-items: center;

								.uimg {
									width: 40rpx;
									height: 40rpx;
									border-radius: 25rpx;
								}

								.uname {
									font-size: 28rpx;
									color: #000000;
									margin-left: 10rpx;
								}

								.tipss {
									width: 80rpx;
									background: #000000;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #FFFFFF;
									line-height: 36rpx;
									text-align: center;
									margin-left: 10rpx;
								}

								.tipss1 {
									width: 80rpx;
									background: #036029;
									border-radius: 0rpx 0rpx 0rpx 0rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									line-height: 36rpx;
									color: #FFFFFF;
									text-align: center;
									margin-left: 10rpx;
								}
							}

							.time {
								font-size: 24rpx;
								color: #979797;
							}
						}

						.contxt {
							margin-top: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}
					}

					.items:last-child {
						border-top: none;
						margin-top: 0rpx;
					}

				}
			}
		}
	}
</style>